<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图库共享 - 智能协同图片素材网</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex">
                    <div class="flex-shrink-0 flex items-center">
                        <span class="text-indigo-600 text-xl font-bold">图库共享</span>
                    </div>
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                        <a href="index.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">首页</a>
                        <a href="explore.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">探索</a>
                        <a href="workspace.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">工作空间</a>
                        <a href="community.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">社区</a>
                    </div>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:items-center">
                    <!-- 搜索框 -->
                    <div class="relative">
                        <input type="text" placeholder="搜索素材..." class="bg-gray-100 rounded-full py-2 px-4 w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <button class="absolute right-0 top-0 mt-2 mr-3 text-gray-400">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    
                    <!-- 上传按钮 -->
                    <a href="upload.html" class="ml-4 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        上传素材
                    </a>
                    
                    <!-- 用户菜单 -->
                    <div class="ml-4 relative">
                        <button class="rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main>
        <!-- 英雄区域 -->
        <div class="bg-indigo-50 py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
                    <div>
                        <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
                            发现与分享<br>
                            <span class="text-indigo-600">高质量图片素材</span>
                        </h1>
                        <p class="mt-4 text-xl text-gray-600">
                            一站式协同创作平台，为团队提供强大的图片管理与协作功能。
                        </p>
                        <div class="mt-8 flex gap-4">
                            <a href="signup.html" class="px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                免费注册
                            </a>
                            <a href="explore.html" class="px-5 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                浏览素材
                            </a>
                        </div>
                    </div>
                    <div class="mt-12 lg:mt-0">
                        <div class="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
                            <img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" 
                                src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" 
                                alt="团队协作">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 精选素材 -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-2xl font-bold text-gray-900">精选素材</h2>
                <a href="explore.html" class="text-indigo-600 hover:text-indigo-500">查看全部</a>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 素材卡片 1 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
                    <div class="relative pb-2/3">
                        <img src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="自然风景" class="absolute h-full w-full object-cover">
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-medium text-gray-900">自然风景</h3>
                            <button class="text-gray-400 hover:text-indigo-500">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <div class="flex items-center mt-2">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="ml-2 text-sm text-gray-500">张明</span>
                        </div>
                    </div>
                </div>
                
                <!-- 素材卡片 2 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
                    <div class="relative pb-2/3">
                        <img src="https://images.unsplash.com/photo-1523731407965-2430cd12f5e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="工作场景" class="absolute h-full w-full object-cover">
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-medium text-gray-900">工作场景</h3>
                            <button class="text-gray-400 hover:text-indigo-500">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <div class="flex items-center mt-2">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="ml-2 text-sm text-gray-500">李华</span>
                        </div>
                    </div>
                </div>
                
                <!-- 素材卡片 3 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
                    <div class="relative pb-2/3">
                        <img src="https://images.unsplash.com/photo-1561070791-2526d30994b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="城市建筑" class="absolute h-full w-full object-cover">
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-medium text-gray-900">城市建筑</h3>
                            <button class="text-gray-400 hover:text-indigo-500">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <div class="flex items-center mt-2">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="ml-2 text-sm text-gray-500">王强</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 素材分类 -->
        <div class="bg-gray-100 py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-8">素材分类</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <a href="category.html?id=nature" class="group">
                        <div class="relative h-40 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="自然" class="w-full h-full object-cover group-hover:opacity-90 transition-opacity duration-300">
                            <div class="absolute inset-0 bg-gradient-to-t from-black opacity-60"></div>
                            <div class="absolute bottom-0 left-0 p-4">
                                <span class="text-white text-lg font-medium">自然</span>
                            </div>
                        </div>
                    </a>
                    <a href="category.html?id=business" class="group">
                        <div class="relative h-40 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="商务" class="w-full h-full object-cover group-hover:opacity-90 transition-opacity duration-300">
                            <div class="absolute inset-0 bg-gradient-to-t from-black opacity-60"></div>
                            <div class="absolute bottom-0 left-0 p-4">
                                <span class="text-white text-lg font-medium">商务</span>
                            </div>
                        </div>
                    </a>
                    <a href="category.html?id=architecture" class="group">
                        <div class="relative h-40 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="建筑" class="w-full h-full object-cover group-hover:opacity-90 transition-opacity duration-300">
                            <div class="absolute inset-0 bg-gradient-to-t from-black opacity-60"></div>
                            <div class="absolute bottom-0 left-0 p-4">
                                <span class="text-white text-lg font-medium">建筑</span>
                            </div>
                        </div>
                    </a>
                    <a href="category.html?id=technology" class="group">
                        <div class="relative h-40 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="科技" class="w-full h-full object-cover group-hover:opacity-90 transition-opacity duration-300">
                            <div class="absolute inset-0 bg-gradient-to-t from-black opacity-60"></div>
                            <div class="absolute bottom-0 left-0 p-4">
                                <span class="text-white text-lg font-medium">科技</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- 平台特点 -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-12">为什么选择我们</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="text-center">
                    <div class="inline-flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-xl font-medium text-gray-900">团队协作</h3>
                    <p class="mt-3 text-base text-gray-500">多人实时协作，便捷地管理和共享素材，提高团队工作效率。</p>
                </div>
                <div class="text-center">
                    <div class="inline-flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
                        <i class="fas fa-photo-video"></i>
                    </div>
                    <h3 class="text-xl font-medium text-gray-900">高质量素材</h3>
                    <p class="mt-3 text-base text-gray-500">汇聚各类高清图片素材，涵盖多种场景和主题，满足不同设计需求。</p>
                </div>
                <div class="text-center">
                    <div class="inline-flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="text-xl font-medium text-gray-900">安全可靠</h3>
                    <p class="mt-3 text-base text-gray-500">严格的权限管理和素材保护机制，确保您的素材安全无忧。</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white">
        <div class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">图库共享</h3>
                    <p class="text-gray-400">智能协同图片素材网，为创作者提供完美的协作平台。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-gray-400 hover:text-white">首页</a></li>
                        <li><a href="explore.html" class="text-gray-400 hover:text-white">探索</a></li>
                        <li><a href="workspace.html" class="text-gray-400 hover:text-white">工作空间</a></li>
                        <li><a href="community.html" class="text-gray-400 hover:text-white">社区</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关于我们</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">公司简介</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">加入我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">帮助中心</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github fa-lg"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin fa-lg"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 pt-8 mt-12 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400">© 2023 图库共享. 保留所有权利</p>
                <div class="flex mt-4 md:mt-0 space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white">隐私政策</a>
                    <a href="#" class="text-gray-400 hover:text-white">使用条款</a>
                    <a href="#" class="text-gray-400 hover:text-white">Cookie 政策</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>